﻿<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var dataMap = {};
function dataFormatter(obj) {
    var pList = ['1','2','3','4','5','6','7'];
    var temp;
    for (var week = 1; week <= 4; week++) {
        var max = 0;
        var sum = 0;
        temp = obj[week];
        for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            sum += temp[i];
            obj[week][i] = {
                name : pList[i],
                value : temp[i]
            }
        }
        obj[week + 'max'] = Math.floor(max / 100) * 100;
        obj[week + 'sum'] = sum;
    }
    return obj;
}

dataMap.dataPI = dataFormatter({
    //max : 4000,
    4:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76],
    3:[88.68,112.38,1400,262.42,589.56,882.41,625.61],
    2:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69],
    1:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23]
    
});

dataMap.dataSI = dataFormatter({
    //max : 26600,
    4:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83],
    3:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68],
    2:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37],
    1:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49]
});

dataMap.dataTI = dataFormatter({
    //max : 25000,
    4:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83],
    3:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64],
    2:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48],
    1:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88]
});




option = {
    baseOption: {
        timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [
                '1','2','3','4',
            ],
        },
        title: {
            subtext: ''
        },
        tooltip: {
        },
        legend: {
            x: 'right',
            data: ['支付宝', '微信', '其他'],
        },
        calculable : true,
        grid: {
            top: 80,
            bottom: 100,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value.replace('\n', '');
                        }
                    }
                }
            }
        },
        xAxis: [
            {
                'type':'category',
                'axisLabel':{'interval':0},
                'data':[
                    '1','2','3','4','5','6','7'
                ],
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '￥（元）'
            }
        ],
        series: [
        	
            {name: '支付宝', type: 'bar'},
            {name: '微信', type: 'bar'},
            {name: '其他', type: 'bar'},
            {
                name: '支付方式',
                type: 'pie',
                center: ['88%', '25%'],
                radius: '28%',
                z: 100
            }
        ]
    },
    options: [
        {
            title: {text: '第一周交易金额'},
            series: [
                {data: dataMap.dataPI['1']},
                {data: dataMap.dataSI['1']},
                {data: dataMap.dataTI['1']},
                {data: [
                    {name: '支付宝', value: dataMap.dataPI['1sum']},
                    {name: '微信', value: dataMap.dataSI['1sum']},
                    {name: '其他', value: dataMap.dataTI['1sum']}
                ]}
            ]
        },
        {
            title : {text: '第二周交易金额'},
            series : [
                {data: dataMap.dataPI['2']},
                {data: dataMap.dataSI['2']},
                {data: dataMap.dataTI['2']},
                {data: [
                    {name: '支付宝', value: dataMap.dataPI['2sum']},
                    {name: '微信', value: dataMap.dataSI['2sum']},
                    {name: '其他', value: dataMap.dataTI['2sum']}
                ]}
            ]
        },
        {
            title : {text: '第三周交易金额'},
            series : [
                {data: dataMap.dataPI['3']},
                {data: dataMap.dataSI['3']},
                {data: dataMap.dataTI['3']},
                {data: [
                    {name: '支付宝', value: dataMap.dataPI['3sum']},
                    {name: '微信', value: dataMap.dataSI['3sum']},
                    {name: '其他', value: dataMap.dataTI['3sum']}
                ]}
            ]
        },
        {
            title : {text: '第四周交易金额'},
            series : [
                {data: dataMap.dataPI['4']},
                {data: dataMap.dataSI['4']},
                {data: dataMap.dataTI['4']},
                {data: [
                    {name: '支付宝', value: dataMap.dataPI['4sum']},
                    {name: '微信', value: dataMap.dataSI['4sum']},
                    {name: '其他', value: dataMap.dataTI['4sum']}
                ]}
            ]
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>